<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">默认</div>
			<fileImport
				:templateUrl="getUrl('uploads/excel/文章表导入示例.xlsx')"
				:fetchFun="articleImport"
				tip="请上传小于或等于 10M 的 .xls, .xlsx 格式文件"
				@success="getTableList"
			/>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">自定义</div>
			<fileImport
				ref="fileImportRef"
				:params="{ title: '123456' }"
				:templateUrl="getUrl('uploads/excel/文章表导入示例.xlsx')"
				:fetchFun="articleImport"
				:accept="['.xls']"
				:maxSize="30"
				tip="请上传小于或等于 30M 的 .xls 格式文件"
				@success="getTableList"
			>
				<template #defualt>
					<el-button type="primary" class="mr-[15px]" @click="fileImportRef.open()">导入自定义</el-button>
				</template>
				<template #uploader>
					<div class="el-upload__text">请上传文件</div>
				</template>
				<template #errTable="{ errorData }">
					<el-alert
						:title="`总共 ${errorData.total_count} 条，其中有 ${errorData.fail_count} 条格式不满足导入要求，请修改后再次操作！`"
						type="error"
						show-icon
						:closable="false"
					/>
					<el-table :data="errorData.data" max-height="270" style="width: 100%">
						<el-table-column prop="key" label="键名" width="150" />
						<el-table-column prop="row_count" label="行数" width="100" />
						<el-table-column prop="" label="状态" width="100">
							<el-tag type="danger"><SvgIcon name="ele-CircleCloseFilled" :size="12" /> 失败</el-tag>
						</el-table-column>
						<el-table-column prop="reason" label="原因" />
					</el-table>
				</template>
			</fileImport>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compFileImport">
import { ref } from 'vue';
import { getUrl } from '/@/utils/util';
import { articleImport } from '/@/api/cms/article';

const fileImportRef = ref(null);

const getTableList = () => {};
</script>

<style scoped lang="scss"></style>
